/* 单个交易记录的的 item
 * @Author: Joursion
 * @Date: 2018-07-17 11:55:21
 * @Last Modified by: Joursion
 * @Last Modified time: 2018-09-03 17:36:14
 */

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { scaleSize, scaleFontSize } from '../util/size';

interface IProps {
    type: string,
    time: string,
    coinType: string,
    amount: string | number,
}

const balanceTypeMap = {
    extract: '提币',
    deposit: '充币',
    '2exc': '转到交易所',
    '2bank': '转到银行',
}

export default class BalanceRecord extends Component<IProps, any>{
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    // onPress = () => {
    //     if (this.props.onPress) {
    //         this.props.onPress()
    //     }
    // }

    render() {
        const { type, time, coinType, amount } = this.props;
        
        let typeText = balanceTypeMap[type];
        let prefix = (type == 'extract' || type == '2exc') ? '- ' : '+ ';
        let opText = `${prefix} ${amount} ${coinType}`;

        return (
            <TouchableOpacity activeOpacity={1}>
                <View style={{
                    display: 'flex',
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    height: scaleSize(73),
                    paddingLeft: scaleSize(20),
                    paddingRight: scaleSize(20),
                    paddingBottom: scaleSize(16),
                    backgroundColor: '#FFFFFF',
                    borderBottomColor: 'rgba(0,0,0,0.11)',
                    borderBottomWidth: 1,
                }}>
                    <View style={{
                        paddingTop: scaleSize(35)
                    }}>
                        <Text style={{
                            
                            fontFamily: 'PingFangSC-Regular',
                            fontSize: scaleSize(16),
                            color: 'rgba(61,96,208,0.58)'
                        }}>
                            {typeText}
                        </Text>
                    </View>

                    <View style={{
                        display: 'flex',
                        flexDirection: 'column',
                        paddingTop: scaleSize(26),
                    }}>
                        <Text style={{
                            fontFamily: 'Helvetica',
                            fontSize: scaleSize(12),
                            lineHeight: scaleSize(14),
                            color: '#C5C5C5',
                            textAlign: 'right',
                        }}>{new Date(time).toLocaleString()}</Text>

                        <Text style={{
                            marginTop: scaleSize(3),
                            fontFamily: 'Helvetica',
                            fontSize: scaleSize(14),
                            lineHeight: scaleSize(17),
                            color: '#888888',
                            textAlign: 'right',
                        }}>{opText}</Text>

                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}
